<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新乡市全域旅游大数据平台</title>
    <link rel="stylesheet" href="./assets/css/public.css">
    <link rel="stylesheet" href="./assets/css/common.css">
    <link rel="stylesheet" href="./assets/css/index.css">
    <link rel="stylesheet" href="./assets/css/index_zyhj.css">
    <link rel="stylesheet" href="./assets/css/animate.min.css">
</head>
<body>
    <div class="box">
        <!--头部-->
        <div class="title-box">
            <div class="title-left">
                <span id="weather">小雨转晴</span>
                <span id="temperature">32/23℃</span>
                <span id="windPower">东风</span>
            </div>
            <div class="title-img">
                <h3>新乡市全域旅游大数据平台</h3>
                <img src="./assets/images/title-bg.png">
            </div>
        </div>
        <!--主体-->
        <div class="main-box">
            <!--导航-->
            <div class="nav-box">
                <ul>
                    <li class="active">
                        <a href="#">
                            <div>
                                <img src="./assets/images/icon-index.png">
                                <img src="./assets/images/icon-index-active.png">
                            </div>
                            <p>旅游发展环境</p>
                        </a>
                    </li>
                    <li>
                        <a href="./chanye_jq.html">
                            <div>
                                <img src="./assets/images/icon-analysis.png">
                                <img src="./assets/images/icon-analysis-active.png">
                            </div>
                            <p>旅游产业监测</p>
                        </a>
                    </li>
                    <li>
                        <a href="./tongji.html">
                            <div>
                                <img src="./assets/images/icon-operation.png">
                                <img src="./assets/images/icon-operation-active.png">
                            </div>
                            <p>旅游统计监测</p>
                        </a>
                    </li>
                    <li>
                        <a href="./lvyoujia_qx.html">
                            <div>
                                <img src="./assets/images/icon-activity.png">
                                <img src="./assets/images/icon-activity-active.png">
                            </div>
                            <p>旅游+</p>
                        </a>
                    </li>
                </ul>
            </div>
            <!--数据内容-->
            <div class="content-box flex-column">
                <div class="content-nav">
                    <ul>
                        <li>
                            <a href="./index.html">旅游发展环境</a>
                        </li>
                        <li class="active">
                            <a href="./index_zyhj.html">资源环境</a>
                        </li>
                        <li>
                            <a href="http://www.zezhou.gov.cn/zwgk/">政治环境</a>
                        </li>
                        <li>
                            <a href="http://124.164.243.86:8888/www/">社会环境</a>
                        </li>
                    </ul>
                </div>
                <div class="content-main flex-row flex1">
                    <div class="content-left">
                        <div class="basicElements-leftTop animated bounceInDown">
                            <div class="content-title">
                                旅游产业要素
                            </div>
                            <div class="content-left-main flex1">
                                <ul class="basicElements-leftTop-nav">
                                    <li>
                                        <a href="./index_zyhj.html">
                                            <div class="img-box">
                                                <img src="./assets/images/jingqu.png">
                                                <img src="./assets/images/jingqu-active.png">
                                            </div>
                                            <div class="heroic-content">
                                                <p>景区</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="./index_zyhj_zs.html">
                                            <div class="img-box">
                                                <img src="./assets/images/zhusu.png">
                                                <img src="./assets/images/zhusu-active.png">
                                            </div>
                                            <div class="heroic-content">
                                                <p>住宿</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="active">
                                        <a href="./index_zyhj_cy.html">
                                            <div class="img-box">
                                                <img src="./assets/images/canyin.png">
                                                <img src="./assets/images/canyin-active.png">
                                            </div>
                                            <div class="heroic-content">
                                                <p>餐饮</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="./index_zyhj_gw.html">
                                            <div class="img-box">
                                                <img src="./assets/images/gouwu.png">
                                                <img src="./assets/images/gouwu-active.png">
                                            </div>
                                            <div class="heroic-content">
                                                <p>购物</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="./index_zyhj_lxs.html">
                                            <div class="img-box">
                                                <img src="./assets/images/lvxingshe.png">
                                                <img src="./assets/images/lvxingshe-active.png">
                                            </div>
                                            <div class="heroic-content">
                                                <p>旅行社</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="./index_zyhj_wc.html">
                                            <div class="img-box">
                                                <img src="./assets/images/wc.png">
                                                <img src="./assets/images/wc-active.png">
                                            </div>
                                            <div class="heroic-content">
                                                <p>厕所</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="./index_zyhj_wb.html">
                                            <div class="img-box">
                                                <img src="./assets/images/wenbao.png">
                                                <img src="./assets/images/wenbao-active.png">
                                            </div>
                                            <div class="heroic-content">
                                                <p>文保</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="index_zyhj_xc.html">
                                            <div class="img-box">
                                                <img src="./assets/images/xiangcun.png">
                                                <img src="./assets/images/xiangcun-active.png">
                                            </div>
                                            <div class="heroic-content">
                                                <p>乡村</p>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                                <!--<div class="basicElements-leftTop-info">-->
                                    <!--<a href="javascript:;">-->
                                        <!--<span>5个</span>-->
                                        <!--<b>4A级</b>-->
                                    <!--</a>-->
                                    <!--<a href="javascript:;">-->
                                        <!--<span>15个</span>-->
                                        <!--<b>3A级</b>-->
                                    <!--</a>-->
                                    <!--<a href="javascript:;">-->
                                        <!--<span>20个</span>-->
                                        <!--<b>2A级</b>-->
                                    <!--</a>-->
                                    <!--<a href="javascript:;">-->
                                        <!--<span>30个</span>-->
                                        <!--<b>A级</b>-->
                                    <!--</a>-->
                                <!--</div>-->
                                <p class="total">共<i>8</i>条记录</p>
                                <div class="basicElements-info-list scrollbar">
                                    <ul>
                                        <li><span>珏山绿色烧烤营</span><a href="javascript:;">查看</a></li>
                                        <li><span>晋商家宴</span><a href="javascript:;">查看</a></li>
                                        <li><span>我在大阳等你</span><a href="javascript:;">查看</a></li>
                                        <li><span>山里泉饭店</span><a href="javascript:;">查看</a></li>
                                        <li><span>红勺子火锅</span><a href="javascript:;">查看</a></li>
                                        <li><span>忆园农家乐</span><a href="javascript:;">查看</a></li>
                                        <li><span>永济饺子馆(传统街店)</span><a href="javascript:;">查看</a></li>
                                        <li><span>鑫慧苑大酒店</span><a href="javascript:;">查看</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="content-center flex3">
                        <div class="flex1 map-box bounceInUp animated">
                            <div class="map" id="myMap">

                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</body>
<script src="./assets/plugin/jquery.min.js"></script>
<script src="./assets/plugin/ECharts/echarts.js"></script>
<script src="./assets/plugin/ECharts/china.js"></script>
<script src="./assets/plugin/jquery.leoTextAnimate.js"></script>
<script src="./assets/js/public.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=RbLCQuGNfG1cQrKmywquV6wEEkoVkyNY"></script>
</html>
<script>

    // 百度地图API功能
    var map = new BMap.Map("myMap", {minZoom:7,maxZoom:15}, { enableMapClick: false });
    var point = new BMap.Point(112.804751,35.599536);    // 初始化地图,设置中心点坐标
    map.centerAndZoom(point, 11);
    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    var blist = [];
    var districtLoading = 0;
    //设置样式
    map.setMapStyle({
        styleJson: [
            {//不显示点信息
                "featureType": "poi",
                "elementType": "all",
                "stylers": {
                    "color": "#fffff ",
                    "visibility": "off"
                }
            }
        ]
    });map.setMapStyle({
        styleJson: [
            {//不显示点信息
                "featureType": "poi",
                "elementType": "all",
                "stylers": {
                    "color": "#fffff ",
                    "visibility": "off"
                }
            }
        ]
    });

    function getBoundary(){
        //百度地图获取行政区域的对象
        var bdary = new BMap.Boundary();

        bdary.get("新乡市", function (rs) {       //获取行政区域

            //以下是获取行政区域的回调
            // map.clearOverlays();        //清除地图覆盖物

            //需要绘制边界多边形的点集合
            var paths = new Array();
            //行政区域点集合，以;分隔的
            var pointliststr = rs.boundaries[0];
            //3获取点数组，push到 paths中
            var pointlist = pointliststr.split(";");
            var firstPoint;
            for(var i =0;i<pointlist.length;i++)
            {

                var tempPt = pointlist[i].split(',');
                var newPoint = new BMap.Point(tempPt[0],tempPt[1]);
                if(i==0){ firstPoint= newPoint;};

                paths.push(newPoint);
            }
            //第一点再推进去，形成一个闭环，构造了多边形的内环
            paths.push(firstPoint);

            //自定义的八个便捷点，从东开始逆时针，东，东北，北，西北，西，西南，南，东南（必须按顺序来）
            paths.push(new BMap.Point(170.672126, 39.623555));
            paths.push(new BMap.Point(170.672126, 81.291804));
            paths.push(new BMap.Point(105.913641, 81.291804));
            paths.push(new BMap.Point(-169.604276,  81.291804));
            paths.push(new BMap.Point(-169.604276, 39.623555));
            paths.push(new BMap.Point(-169.604276, -68.045308));
            paths.push(new BMap.Point(105.913641, -68.045308));
            paths.push(new BMap.Point(170.672126, -68.045308));
            paths.push(new BMap.Point(170.672126, 39.623555));

            //4绘制第一个多边形，覆盖住除行政区外的所有部分,fillColor:填充色，strokeColor：边界颜色（设置透明，否则会有其他线条），strokeOpacity：线条透明，fillOpacity：填充物透明。
            var ply1 = new BMap.Polygon("",
                { fillColor: "#062031", strokeColor: "transparent", strokeOpacity:0,fillOpacity:0.9}); //建立多边形覆盖物
            //将之前形成的点set到多边形对象中
            ply1.setPath(paths);
            //在地图上添加第一个多边形
            map.addOverlay(ply1);  //遮罩物是半透明的，如果需要纯色可以多添加几层


            //5. 给目标行政区划添加边框，其实就是给目标行政区划添加一个没有填充物的遮罩层，绘制出边界线
            var ply = new BMap.Polygon(rs.boundaries[0],
                { strokeWeight: 2, strokeColor: "#000",fillColor: "transparent" });
            map.addOverlay(ply);
            map.setViewport(ply.getPath());    //调整视野
        });
    }
    // //创建并打开窗口
    function openInfo(content, e) {
        var p = e.target;
        console.log(e)
        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象
        map.openInfoWindow(infoWindow, point); //开启信息窗口
    }
    var opts = {
        width: 100,     // 信息窗口宽度
        height: 24,     // 信息窗口高度
        // title : "信息窗口" , // 信息窗口标题
        enableMessage: true//设置允许信息窗发送短息
    };
    let newIcon = new BMap.Icon("./assets/images/icon-food.png", new BMap.Size(44, 44));
    var data_info = [
        [113.015367,35.448305, "珏山绿色烧烤营"],
        [112.904137,35.529589, "晋商家宴"],
        [112.803697,35.671901, "我在大阳等你"],
        [112.64775,35.28882, "山里泉饭店"],
        [112.716815,35.568325, "红勺子火锅"],
        [112.658291,35.400377, "忆园农家乐"],
        [112.855913,35.3372, "永济饺子馆(传统街店)"],
        [112.885382,35.570746, "鑫慧苑大酒店"],

    ];
    var radioData = []
    var html=`<!--<h3>小龙坎老火锅(晋城颐翠店)</h3><p>地址：山西省晋城市开发区新市东街2036号紫薇华庭商务中心1号楼4号房屋</p><p>电话：(0356)2068988</p>-->`
    for (var i = 0; i < data_info.length; i++) {
        var marker = new BMap.Marker(new BMap.Point(data_info[i][0], data_info[i][1]), {icon:newIcon });  // 创建标注
        var content = data_info[i][2];
        var label = new BMap.Label(content);
        marker.setLabel(label);
        map.addOverlay(marker);               // 将标注添加到地图中
        addClickHandler(content, marker);
    }
    //添加点击事件
    function addClickHandler(content, marker) {
        marker.addEventListener("click", function(e) {
            // openInfo(html, e);
            // window.location.href='./indexDetail.html'
        });
    }
    //

    setTimeout(function(){
        getBoundary();
    }, 200);

</script>
